<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-list>
          <fu-list-item title="标题文字" />
          <fu-list-item 
            title="标题文字" 
            desc="描述文字"
          />
        </fu-list>
      </view>
    </view>
    
    <!-- 图标和箭头 -->
    <view class="demo-block">
      <view class="demo-block__title">图标和箭头</view>
      <view class="demo-block__content">
        <fu-list>
          <fu-list-item 
            title="标题文字" 
            icon="setting-o"
            arrow
          />
          <fu-list-item 
            title="标题文字" 
            desc="描述文字"
            icon="setting-o"
            arrow
          />
        </fu-list>
      </view>
    </view>
    
    <!-- 可点击状态 -->
    <view class="demo-block">
      <view class="demo-block__title">可点击状态</view>
      <view class="demo-block__content">
        <fu-list>
          <fu-list-item 
            title="标题文字" 
            clickable
            @click="onClick"
          />
          <fu-list-item 
            title="标题文字" 
            desc="描述文字"
            clickable
            disabled
          />
        </fu-list>
      </view>
    </view>
    
    <!-- 自定义内容 -->
    <view class="demo-block">
      <view class="demo-block__title">自定义内容</view>
      <view class="demo-block__content">
        <fu-list>
          <fu-list-item>
            <template #title>
              <text class="custom-title">自定义标题</text>
            </template>
            <template #desc>
              <text class="custom-desc">自定义描述</text>
            </template>
            <template #right>
              <fu-button 
                type="primary"
                size="mini"
              >按钮</fu-button>
            </template>
          </fu-list-item>
        </fu-list>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    onClick() {
      uni.showToast({
        title: '点击了列表项',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    border-radius: var(--fu-radius-base);
    overflow: hidden;
  }
}

.custom-title {
  color: var(--fu-primary-color);
  font-weight: bold;
}

.custom-desc {
  color: var(--fu-warning-color);
}
</style> 